<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{name}}</h1>
        <h3 v-text="age"></h3>

        <hr>

        <!--v-html指令，将内容以html解析-->
        <h1 v-html="html"></h1>

        <!--将值绑定到标签的自定义属性上，形式为 v-bind:title=“mytitle”，可以简写为 :属性名-->
        <a href="http://www.baidu.com" v-bind:title="result">百度一下</a>
        <hr>
        <img src="https://devpress.csdnimg.cn/489fad64a62648818eaaebc28e5c8659.jpg" :title="result">
    </div>
</body>

<script type="text/javascript">
    // v-text是用于操作纯文本，它会替代显示对应的数据对象上的值，可以简写为{{}}, 即插值表达式
    // 创建vue对象
    var vm = new Vue({
        el: "#app",
        data: {
            name: "大锤",
            age: 56,
            html: "<u>这是html标签</u>",
            result: "attr"
        }
    });
</script>
</html>